import React, { Component } from "react";
import { NavLink, Route, Redirect } from "react-router-dom";
import { Icon } from "antd";
import "../css/index.css";
import OneBook from "./child/one.jsx";
import TwoBook from "./child/two.jsx";
import ThreeBook from "./child/three.jsx";
class List extends Component {
  render() {
    const { path } = this.props.match;
    return (
      <div>
        <header className="cla-header">
          <div className="flex">
            <NavLink to="/">
              <div className="cla-fh">
                <Icon type="left" />
              </div>
            </NavLink>
            <span className="span">排行榜</span>
          </div>
          <div className="flex">
            <div className="flex-margin">
              <Icon type="filter" />
            </div>
            <div className="flex-margin">
              <Icon type="search" />
            </div>
            <div className="flex-margin">
              <Icon type="menu" />
            </div>
          </div>
        </header>
        <div className="list-left">
          <NavLink to={`${path}/hot`} activeClassName="active">
            <button className="list-button">热销榜</button>
          </NavLink>
          <NavLink to={`${path}/new`} activeClassName="active">
            <button className="list-button">新书榜</button>
          </NavLink>
          <NavLink to={`${path}/end`} activeClassName="active">
            <button className="list-button">完本榜</button>
          </NavLink>
          <NavLink to={`${path}/dj`} activeClassName="active">
            <button className="list-button">点击榜</button>
          </NavLink>
          <NavLink to={`${path}/ztj`} activeClassName="active">
            <button className="list-button">周推荐榜</button>
          </NavLink>
          <NavLink to={`${path}/gx`} activeClassName="active">
            <button className="list-button">更新榜</button>
          </NavLink>
          <NavLink to={`${path}/ybfy`} activeClassName="active">
            <button className="list-button">言吧风云榜</button>
          </NavLink>
        </div>
        <div className="list-right">
          <div>
            {/* <Route path={`${path}/hot`}  component={OneBook}/> */}
            <Redirect to={`${path}/hot`} />
            <Route path={`${path}/hot`} component={OneBook} />
            <Route path={`${path}/new`} component={TwoBook} />
            <Route path={`${path}/end`} component={ThreeBook} />
            <Route path={`${path}/dj`} component={() => <h1>点击榜</h1>} />
            <Route path={`${path}/ztj`} component={() => <h1>周推荐榜</h1>} />
            <Route path={`${path}/gx`} component={() => <h1>更新榜</h1>} />
            <Route
              path={`${path}/ybfy`}
              component={() => <h1>言吧风云榜</h1>}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default List;
